<template>
	<div class="bodys">
		<div class="main">
			<div class="games-wrap" data-name="小艾電競" @click="getGame('IA')">
				<img src="../../assets/newimg/dianjingbg3.webp" class="gl" alt="gl">
				<div class="games">
					<div class="play">
						<img src="../../assets/newimg/dianjingbg4.webp" alt="" />
					</div>
				</div>
			</div>
			<div class="games-logo" data-name="雷火電競" @click="getGame('TF')">
				<h2>
					<img src="../../assets/newimg/dianjingbg8.webp" alt="" />
				</h2>
				<img class="dj" src="../../assets/newimg/dianjingbg6.webp" alt="" />
			</div>
		</div>
		<loading v-if="isLoadingShow"></loading>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		playGame
	} from "../../utils/api.js"
	import loading from '../../components/loading.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				isLoadingShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loading,
			loadingFour
		},
		created() {},
		mounted() {
			// if(localStorage.getItem('show')==1){
			// 	this.isLoadingShow = true
			// 	// window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			// }
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getGame(type) {
				if (!localStorage.getItem('token')) {
					this.$emit('getShowLogin', true)
					return false;
				}
				this.isLoadingShow = true;
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=ES&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: type,
					game_type: 'ES',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// localStorage.setItem('show',1)
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.isLoadingShow = false;
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// this.isLoadingShow = false;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					// localStorage.removeItem('show')
					this.isLoadingShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.bodys {
		flex-grow: 1;
		position: relative;
		background: #0b131c url('../../assets/newimg/dianjingbg.png') 50%/cover no-repeat;
		height: 100%;
		margin-bottom: -10px;
		width: 100%;
	}

	.main {
		height: auto !important;
	}

	.games-wrap {
		background: url('../../assets/newimg/dianjingbg1.webp') 0 100%/auto 80% no-repeat, url('../../assets/newimg/dianjingbg2.webp') 100% 100%/auto 80% no-repeat;
		height: calc(100vh - 366px);
		min-height: 700px;
		position: relative;
		text-align: center;
		width: 100%;
	}

	.gl {
		height: 62%;
		left: 50%;
		position: absolute;
		top: 50px;
		transform: translateX(-50%);
	}

	.games {
		align-items: flex-end;
		display: flex;
		height: 100%;
		justify-content: center;
		margin: 0 auto;
		max-width: 1000px;
		width: 100%;
	}

	.play {
		margin: 0 auto 20px;
		position: relative;
		width: 350px;
	}

	.play img {
		display: block;
		height: 90px;
		margin: 0 auto;
		width: auto;
	}

	.games-logo {
		background: #09111b url('../../assets/newimg/dianjingbg5.png') 50% no-repeat;
		background-size: cover;
		padding: 50px 0;
		text-align: center;
	}

	h2 img {
		margin-bottom: 50px;
		width: 460px;
	}

	.dj {
		min-width: 712px;
		width: 50%;
	}
</style>